<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jsp/common.jsp" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>- jqGird</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <%--<script src="${prcs}/js/frm/workflow/trafficjs/layer/layer.min.js"></script>--%>
    <link href="${prcs}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${prcs}/css/bootstrap.min.css-v=3.3.5.css" rel="stylesheet">
    <link href="${prcs}/css/font-awesome.min.css-v=4.4.0.css" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${prcs}/css/plugins/jqgrid/ui.jqgrid.css-0820.css" rel="stylesheet">
    <link href="${prcs}/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="${prcs}/css/animate.min.css" rel="stylesheet">
    <link href="${prcs}/css/style.min.css-v=4.0.0.css" rel="stylesheet">
    <base target="_blank">
    <style>
        .form-group {
            margin-bottom: 0;
        }
        .anchorBL{display:none;}
    </style>
</head>


<body class="gray-bg ">
<div class="wrapper  animated fadeInRight" style="padding: 0">
    <div class="row">
        <div class="col-sm-12" style="padding: 0;">
            <div class="wrapper  animated fadeInUp">
                <div class="ibox" style="margin-bottom:0;">
                    <div class="ibox-content">
                        <div class="row">
                            <form method="get" class="form-horizontal">
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">城市</label>
                                        <div class="col-sm-8">
                                            <select class="form-control" name="account">
                                                <option>济南</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="form-group">
                                        <label class="col-sm-4 control-label">日期时间</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" id="datepicker">
                                        </div>
                                    </div>
                                </div>


                                <!--<div class="col-sm-3">-->
                                <!--<div class="form-group">-->
                                <!--<label class="col-sm-4 control-label">申请时间</label>-->
                                <!--<div class="col-sm-8">-->
                                <!--<input type="text" class="form-control">-->
                                <!--</div>-->
                                <!--</div>-->
                                <!--</div>-->
                                <div class="col-sm-3">
                                    <div class="text-center">
                                        <button class="btn btn-success" type="button"><i class="fa fa-search"></i>&nbsp;查询
                                        </button>
                                        <button class="btn btn-default" type="button"><i
                                                class="glyphicon glyphicon-refresh"></i>&nbsp;重置
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="ibox-content" style="padding: 0;position: relative">
                        <button class="btn btn-primary" type="button" style="position: absolute;right: 0;top:0;z-index: 10" onclick="showMapChart(1);">居住人数</button>
                        <button class="btn btn-primary" type="button" style="position: absolute;right: 83px;top:0;z-index: 10" onclick="showMapChart(2);">工作人数</button>
                        <div class="row">
                            <div class="col-sm-12">
                                <div style="height:760px" id="main"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


<!-- 全局js -->
<script src="${prcs}/js/frm/workflow/trafficjs/jquery.min.js-v=2.1.4"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/bootstrap.min.js-v=3.3.5"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/content.min.js-v=1.0.0"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/layer/layer.min.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/iCheck/icheck.min.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/sub.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/peity/jquery.peity.min.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/jqgrid/i18n/grid.locale-cn.js-0820"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/jqgrid/jquery.jqGrid.min.js-0820"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/echarts/echarts.min.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/echarts/skin/piestyle.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/libs/bmap.min.js"></script>
<script type="text/javascript" src="${prcs}/js/frm/workflow/trafficjs/libs/Heatmap_min.js"></script>
<script src="${prcs}/js/frm/workflow/trafficjs/plugins/datapicker/bootstrap-datepicker.js"></script>

<script>
    $(document).ready(function () {
        $("#datepicker").datepicker({keyboardNavigation: !1, forceParse: !1, autoclose: !0});
        // 居住1 工作2
        showMapChart(1);
    });

    function showMapChart(type) {
        $.ajax({
            url: "/frm/configuration/getGridData?type="+type,
            type: "GET",
            success: function (json) {
                showHotMap(json);
//                showRectMap(json);
            }
        });

    }
    function showRectMap(json) {
        var data = [json];
        var myChart2 = echarts.init(document.getElementById('main'));
        var points = [].concat.apply([], data.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([seg.elevation]);
            });
        }));
        var option = {
            animation: false,
            tooltip:{
                show:true,
                formatter:function(val){
                    return val.data[2]
                }
            },
            bmap: {
                center: [116.9929790497, 36.6528583268],
                zoom: 14,
                roam: true,
                mapStyle: {
                    styleJson:[
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#021019"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#147a92"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#0b3d51"
                            }
                        },
                        {
                            "featureType": "local",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "land",
                            "elementType": "all",
                            "stylers": {
                                "color": "#08304b"
                            }
                        },
                        {
                            "featureType": "railway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "railway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#08304b"
                            }
                        },
                        {
                            "featureType": "subway",
                            "elementType": "geometry",
                            "stylers": {
                                "lightness": -70
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#857f7f"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#022338"
                            }
                        },
                        {
                            "featureType": "green",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#062032"
                            }
                        },
                        {
                            "featureType": "boundary",
                            "elementType": "all",
                            "stylers": {
                                "color": "#1e1c1c"
                            }
                        },
                        {
                            "featureType": "manmade",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#022338"
                            }
                        },
                        {
                            "featureType": "poi",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#2da0c6",
                                "visibility": "on"
                            }
                        }
                    ]
                }
            },
            visualMap: {
                show: true,
                top: 'bottom',
                min: 0,
                max: 2000,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['#50a3ba','#eac736','#d94e5d'],
                },
                textStyle:{
                    color:"#fff"
                }
            },
            series: [
                {
                    type: 'scatter',
//                    symbol: "rect",
                    coordinateSystem: 'bmap',
                    data: points,
                    symbolSize: 25,
                    opacity:0.5,
                    label:{
                        show:true,
                        formatter:function(val){
                            return val.data[2]
                        }
                    }
//                    large:true,
                }
            ]
        };
        myChart2.setOption(option);
    }
    // 展示热力图
    function showHotMap(json) {
        var data = [json.data];
        var myChart2 = echarts.init(document.getElementById('main'));
        var points = [].concat.apply([], data.map(function (track) {
            return track.map(function (seg) {
                return seg.coord.concat([seg.elevation]);
            });
        }));
        console.log(points);
        var option = {
            animation: false,
            bmap: {
                center: [116.9929790497, 36.6528583268],
                zoom: 14,
                roam: true,
                mapStyle: {
                    styleJson:[
                        {
                            "featureType": "water",
                            "elementType": "all",
                            "stylers": {
                                "color": "#021019"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "highway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#147a92"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "arterial",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#0b3d51"
                            }
                        },
                        {
                            "featureType": "local",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "land",
                            "elementType": "all",
                            "stylers": {
                                "color": "#08304b"
                            }
                        },
                        {
                            "featureType": "railway",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "railway",
                            "elementType": "geometry.stroke",
                            "stylers": {
                                "color": "#08304b"
                            }
                        },
                        {
                            "featureType": "subway",
                            "elementType": "geometry",
                            "stylers": {
                                "lightness": -70
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "geometry.fill",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#857f7f"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.stroke",
                            "stylers": {
                                "color": "#000000"
                            }
                        },
                        {
                            "featureType": "building",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#022338"
                            }
                        },
                        {
                            "featureType": "green",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#062032"
                            }
                        },
                        {
                            "featureType": "boundary",
                            "elementType": "all",
                            "stylers": {
                                "color": "#1e1c1c"
                            }
                        },
                        {
                            "featureType": "manmade",
                            "elementType": "geometry",
                            "stylers": {
                                "color": "#022338"
                            }
                        },
                        {
                            "featureType": "poi",
                            "elementType": "all",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.icon",
                            "stylers": {
                                "visibility": "off"
                            }
                        },
                        {
                            "featureType": "all",
                            "elementType": "labels.text.fill",
                            "stylers": {
                                "color": "#2da0c6",
                                "visibility": "on"
                            }
                        }
                    ]
                }
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 1000,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 10,
                blurSize: 6
            }]
        };
        myChart2.setOption(option);
    }


</script>
</body>


</html>
